<template>
  <div class="PostListView">
    <a-space
      :direction="'horizontal'"
      style="margin-top: 6vh"
      :align="'center'"
      fill
      :size="'mini'"
    >
      <a-row
        style="min-width: 80vw; background-color: #ffffff; margin-left: 9vw"
        :justify="'center'"
      >
        <a-col :span="7">
          <UserCard />
        </a-col>
        <a-col :span="16" style="margin-left: 0">
          <a-tabs
            style="background-color: #ffffff"
            :size="'large'"
            :type="'card-gutter'"
          >
            <template #extra>
              <a-button :size="'large'" @click="handleClick" type="primary"
                >+添加动态</a-button
              >
              <a-modal
                v-model:visible="visible"
                @cancel="handleCancel"
                :on-before-ok="handleBeforeOk"
                unmountOnClose
                style="min-width: 600px"
              >
                <template #title> 添加动态 </template>
                <div
                  :style="{
                    minWidth: 800,
                    minHeight: 800,
                  }"
                >
                  <a-form :model="form" :style="{ width: '600px' }">
                    <a-form-item
                      field="name"
                      tooltip="Please enter username"
                      label="标题"
                    >
                      >
                      <a-input
                        v-model="form.title"
                        placeholder="请输入文章标题"
                      />
                    </a-form-item>
                    <a-form-item field="post" label="动态内容">
                      <MdEdit
                        :value="form.content"
                        :handle-change="handleChange"
                      />
                    </a-form-item>
                  </a-form>
                </div>
              </a-modal>
            </template>
            <a-tab-pane key="1">
              <template #title>
                <div><icon-calendar-clock /> 我的动态</div>
              </template>
              <CommentPost
                :is-delete="true"
                :data-source="dataSource.values as Post[]"
              />
            </a-tab-pane>
          </a-tabs>
        </a-col>
      </a-row>
    </a-space>
  </div>
</template>

<script setup lang="ts">
import { useStore } from "vuex";
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import {
  Post,
  PostControllerService,
  PostQueryRequest,
} from "../../../generated";
import message from "@arco-design/web-vue/es/message";
import moment from "moment";
import UserCard from "@/components/UserCard.vue";
import MdEdit from "@/components/MdEdit.vue";
import { Message } from "@arco-design/web-vue";
import CommentPost from "@/components/CommentPost.vue";

const store = useStore();
const router = useRouter();
let user = ref({
  userAccount: "未登录",
  userAvatar: "" || null,
  userProfile: "oj",
});

onMounted(() => {
  user.value = store.state.user.loginUser;
});

const handleCancel = () => {
  visible.value = false;
};

const searchParams = ref({
  current: 1,
  pageSize: 10,
});
// 加载函数
const dataSource = reactive([]) as Post[];
const loads = async () => {
  const res = await PostControllerService.listMyPostVoByPageUsingPost({
    ...searchParams,
    userId: store.state.user.loginUser.userId,
  });
  if (res.code === 0) {
    Message.success("获取信息成功");
    // 获取用户信息
    for (const item of res.data.records) {
      item.userName = item.user.userName;
      item.userAvatar = item.user.userAvatar;
      item.createTime = moment(item.createTime).format("YYYY-MM-DD HH:mm:ss");
      item.isShowMoment = false;
      item.isDelete = true;
    }
    // 更新评论区内容
    dataSource.values = res.data.records;
  } else {
    Message.error("获取信息失败" + res.message);
  }
};

onMounted(() => {
  loads();
});

// 模态框内函数
const form = ref({});
const handleChange = (v: string) => {
  form.value.content = v;
};

const visible = ref(false);

const handleClick = () => {
  visible.value = true;
};
const handleBeforeOk = async () => {
  const res = await PostControllerService.addPostUsingPost({
    title: form.value.title,
    content: form.value.content,
  });
  if (res.code === 0) {
    message.success("添加成功");
    visible.value = false;
  } else {
    message.error("添加失败" + res.message);
  }
};

const handleSubmit = () => {
  const res = PostControllerService.addPostUsingPost({
    title: form.value.title,
    content: form.value.content,
  });
  if (res.code === 0) {
    message.success("添加成功");
  } else {
    message.error("操作失败" + res.message);
  }
};
</script>
<style scoped>
.icon-hover {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  transition: all 0.1s;
}
.icon-hover:hover {
  background-color: rgb(var(--gray-2));
}

.image-area {
  width: 100px;
  height: auto;
  border-radius: 2px;
  overflow: hidden;
}
.image-area img {
  width: 100%;
  height: auto;
}
.operatorIcon:hover {
  cursor: pointer;
  background-color: #bbbbbb;
}
.operatorIcon {
  font-size: 1.5vw;
  min-font-size: 10px;
}
</style>
